<template>
  <view>
    <u-navbar
      height="50"
      back-icon-color="#333"
      title="商品详情"
      title-color="#333"
      title-size="36"
    >
    </u-navbar>
    <u-swiper
      v-if="activeInfo && activeInfo.spu && activeInfo.spu.sliderPicUrls"
      :list="activeInfo.spu.sliderPicUrls"
      height="750"
      border-radius="0"
      mode="number"
      indicator-pos="bottomRight"
    ></u-swiper>
    <view class="goodsView">
      <view class="goodsTitle">{{ activeInfo.spuName }}</view>
      <view class="dis-flex flex-y-center flex-y-between">
        <view class="priceView">
          <view class="goodsPrice dis-flex flex-y-center flex-y-between">
            <text class="goodsPrice-tl">¥秒杀价</text>
            <text class="goodsPrice-p"> {{ (activeInfo.seckillPrice * 0.01).toFixed(2) }}</text>
            <text class="goodsPrice-l">原价：¥{{ (activeInfo.price * 0.01).toFixed(2) }}</text>
          </view>
        </view>
        <view class="goodsText">
          <p> 距离活动结束</p>
          <u-count-down
            separator="zh"
            separator-size="26"
            separator-color="#FA453C"
            font-size="26"
            :show-days="false"
            color="#FA453C"
            :timestamp="activeInfo.endTime"
          ></u-count-down>
        </view>
      </view>
    </view>

    <view
      v-if="activeInfo.shop"
      class="store dis-flex flex-y-center"
      @click="routeTo('/shops/store?shopId=' + activeInfo.shop.id)"
    >
      <u-image
        :src="activeInfo.shop.logo"
        border-radius="10"
        width="130rpx"
        height="130rpx"
      ></u-image>
      <view class="store-info">
        <view class="top dis-flex flex-y-center flex-y-between">
          <view class="name">{{ activeInfo.shop.name }}</view>
          <u-icon name="/static/more.png" size="24"></u-icon>
        </view>
        <view class="bot dis-flex flex-y-center flex-y-between">
          <view class="info">
            <text>{{ activeInfo.shop.provinceCityCounty }}</text>
            <text class="fenge">|</text>
            <text>评分：{{ (activeInfo.shop.scoreLevel * 10 * 0.1).toFixed(1) }}</text>
          </view>
          <view class="bt">进店逛逛</view>
        </view>
      </view>
    </view>

    <view class="pickupView">
      <view class="sectionTitle" style="margin-bottom: 20rpx">商品信息</view>
      <u-parse
        v-if="activeInfo.spu"
        :html="activeInfo.spu.description"
        :tag-style="tagStyle"
      ></u-parse>
    </view>

    <u-gap height="100"></u-gap>
    <submitBar :isAdd="false" :isPay="false" :isShare="true" :isContect="true" :isFollow="false">
      <view class="rightView" slot="right">
        <view class="paymentView" @click="onGoodsBuy()">
          <text class="btnTitle">立即抢购</text>
        </view>
      </view>
    </submitBar>
  </view>
</template>

<script>
import submitBar from '@/components/submit-bar.vue'
export default {
  components: {
    submitBar
  },
  data() {
    return {
      tagStyle: {
        table: 'border-collapse: collapse;',
        td: 'border: 1px solid #ccc;line-height: 1.5;min-width: 50px;padding: 3px 5px;text-align: left;'
      },
      // 是否打开SKU弹窗
      skuPopup: false,
      activeInfo: {},
      // SKU弹窗模式
      skuMode: 3,
      // 后端返回的商品信息
      activityId: '',
      goodsInfo: ''
    }
  },
  onLoad(res) {
    this.activityId = res.id
    this.skuId = res.skuId
    this.initData()
  },
  methods: {
    initData() {
      let self = this
      self.$u.api
        .getTimeGoodsDetails({
          activityId: this.activityId,
          skuId: this.skuId
        })
        .then((res) => {
          if (res.data) {
            self.activeInfo = res.data
            let now = parseInt(new Date().getTime())
            self.activeInfo.endTime = (self.activeInfo.activity.endTime - now) / 1000
            console.log(
              'self.activeInfo.endTime',
              self.activeInfo.endTime,
              self.activeInfo.activity.endTime,
              now
            )
            //self.bannerList = res.data.product.carousel_imgs_url;
          }
        })
    },

    onGoodsBuy() {
      let items = []
      items.push({
        skuId: this.skuId,
        count: 1
      })
      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          items: JSON.stringify(items),
          seckillActivityId: this.activityId
        }
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import url('flash-goods-details.css');

page {
  background: #eeeeef;
}

.store {
  height: 180rpx;
  background: #ffffff;
  padding: 25rpx 20rpx;

  .store-info {
    margin-left: 20rpx;
    flex: 1;

    .top {
      margin-bottom: 20rpx;

      .name {
        font-size: 30rpx;
        color: #333333;
      }
    }

    .bot {
      font-size: 24rpx;
      color: #666666;

      .fenge {
        margin: 0 10rpx;
      }

      .bt {
        width: 128rpx;
        height: 50rpx;
        line-height: 50rpx;
        background: #10a28f;
        border-radius: 10rpx;
        color: #ffffff;
        text-align: center;
      }
    }
  }
}

.rightView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20rpx;
}

.paymentView {
  width: 520rpx;
  height: 70rpx;
  background: #10a28f;
  border-radius: 35rpx;
  line-height: 70rpx;
  color: #ffffff;
  text-align: center;
}
</style>
